<template>
  <div class="ui_simulation">
    <van-popup v-model="show" position="top" :overlay="false" :lock-scroll="false" >
      <div @click="goToHome">退出教程</div>
    </van-popup>
    <step1 v-show="showstep===1" @refresh="onStepOne"></step1> 
    <step2 v-show="showstep===2" @refresh="onStepTwo"></step2>
    <step3 v-show="showstep===3" @refresh="showstep=4"></step3>
    <step4 v-show="showstep===4" @refresh="showstep=5"></step4>
    <step5 v-show="showstep===5" @refresh="showstep=6"></step5>
    <step6 v-show="showstep===6"></step6>
  </div>
</template>
<script>
import step1 from "./component/step1";
import step2 from "./component/step2";
import step3 from "./component/step3";
import step4 from "./component/step4";
import step5 from "./component/step5";
import step6 from "./component/step6";
import { setTimeout } from "timers";
export default {
  name: "simulation",
  components: { step1, step2, step3, step4, step5, step6 },
  data() {
    return {
      showstep: 1,
      show: true,
      isClick: true,
      timeout1: null,
      timeout2: null,
      timeout3: null,
      audio: new Audio("/public/two.mp3"), //1.进入首页声音
      audio2: new Audio("/public/three.mp3"), //2.太棒啦
      audio3: new Audio("/public/four.mp3"), //3.刷新完成后，查看最新任务
      audio4: new Audio("/public/five.mp3"), //
      audio5: new Audio("/public/six.mp3"),
      audio6: new Audio("/public/seven.mp3")
    };
  },
  mounted() {
    this.audio.play();
  },
  methods: {
    goToHome(){
      this.$router.push('./'); //返回首页
    },
    onStepOne() {
      const self=this;
      if (this.isClick) {
        this.isClick = false;
        this.audio.pause();
        this.audio2.play();
        this.showstep = 2;
        this.timeout1 = setTimeout(()=> {
          self.audio3.play();
        }, 2000);
        this.timeout2 = setTimeout(()=> {
          self.audio4.play();
        }, 4000);
      }
    },
    onStepTwo() {
      this.audio2.pause();
      if (this.timeout1) {
        clearTimeout(this.timeout1);
        this.audio3.pause();
      }
      if (this.timeout2) {
        clearTimeout(this.timeout2);
        this.audio4.pause();
      }
      this.audio5.play();
      this.timeout3 = setTimeout(()=> {
        this.showstep = 3;
        this.audio6.play();
      }, 3000);
    }
  }
};
</script>
<style lang="less">
.ui_simulation {
  .chudian_img {
    width: 89px;
    height: 89px;
  }
  .shou_img {
    width: 82px;
    height: 92px;
  }
  .van-popup {
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    color: #fff;
    height: 128px;
    margin: 0 auto;
    line-height: 128px;
    font-size: 36px;
  }
}
</style>

